<template>
  <div class="home">
      <van-search
      v-model="value"
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
      @click="$router.back('')"
    />
   
    <van-tabs color="#07c160" line-width="20px">
        <van-tab title="本地头条"></van-tab>
        <van-tab title="招聘求职"></van-tab>
        <van-tab title="房屋出租"></van-tab>
        <van-tab title="生意转让"></van-tab>
        <van-tab title="本地朋友"></van-tab>
        <van-tab title="滴滴滴滴"></van-tab>
    </van-tabs>


  <div class="banner" >
  <span>新增一条公交路线S</span>
  <van-grid :border="false" :column-num="3">
  <van-grid-item>
    <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
  </van-grid-item>
  <van-grid-item>
    <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
  </van-grid-item>
  <van-grid-item>
    <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
  </van-grid-item>
  <van-grid-item>
    <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
  </van-grid-item>
  <van-grid-item>
    <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
  </van-grid-item>
</van-grid>
  <p>小王2评论2021-04-22</p>
   <hr>

  <div>
  <span>新增一条公交路线S</span>
  <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
   <p>小王2评论2021-04-22</p>
  </div>
  </div>

  <div class="footer">
    <van-tabbar v-model="active" active-color="#4fc08d" inactive-color="#000" fixed>
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search">发布</van-tabbar-item>
      <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
 

  </div>
</template>

<script>
import { Search  } from 'vant';
import { Tab, Tabs } from 'vant';
import {Image} from 'vant'
import { Grid, GridItem} from 'vant';
import { Tabbar, TabbarItem } from 'vant';


export default {
  name: 'Home',
  data(){
    return{
      value:'',
      name:'',
      active:"",
      fixed:true
    }
  },
  components: {
   [Search .name]:Search,
   [Tab .name]:Tab,
   [Tabs .name]:Tabs,
   [Grid .name]:Grid,
   [GridItem .name]:GridItem,
   [Image.name]:Image,
   [Tabbar.name]:Tabbar,
   [TabbarItem.name]:TabbarItem
   
  },
  methods:{
    getData(){
      this.$http.post('')
      .then(res=>{
        console.log(res)
      })
    }
  }
}
</script>

<style lang="less">

.grid:hover{
  // text-decoration: underline;
  // padding-top:5px ;
  padding-top: 2px;
  border-bottom: 2px solid green;

}
.banner{
  margin-top: 10px;
}
.banner p{
  color: #ccc;
}
.banner p,span{
  padding-left: 15px;
}
.footer{
  margin-top: 50px;
}
</style>
